<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-circle-plus"
      round
      size="mini"
      class="add-btn"
      @click="$router.push('/image/add_image')"
      >添加图片</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-search"
      round
      size="mini"
      class="add-btn"
      @click="handleClickSearch"
      >搜索</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-refresh"
      round
      size="mini"
      class="add-btn"
      @click="handleClickRefresh"
      >刷新</el-button
    >
    <!-- 搜索条件 start -->
    <el-row :gutter="20">
      <el-form label-position="left" label-width="100px">
        <el-col :span="12">
          <el-form-item label="标题：">
            <el-input
              placeholder="标题..."
              v-model="queryFrom.title"
              class="inline-input"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述：">
            <el-input
              placeholder="描述..."
              size="small"
              v-model="queryFrom.description"
              class="inline-input"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签：">
            <el-input
              placeholder="标签..."
              size="small"
              v-model="queryFrom.label"
              class="inline-input"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：">
            <el-date-picker
              v-model="queryFrom.createTime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 搜索条件 end -->
    <el-table
      v-loading="listLoading"
      :data="pageInfo.records"
      element-loading-text="加载中......"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标题">
        <template slot-scope="scope">
          <span
            v-html="scope.row.title"
            class="m-title"
            @click="toImageDetail(scope.row.id)"
          ></span>
        </template>
      </el-table-column>
      <el-table-column label="描述" width="400">
        <template slot-scope="scope">
          <span v-html="scope.row.description"></span>
        </template>
      </el-table-column>
      <el-table-column label="点赞数" prop="likes" />
      <el-table-column label="标签">
        <template slot-scope="scope">
          {{ scope.row.label.join() }}
        </template>
      </el-table-column>
      <el-table-column label="预览">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            fit="cover"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope"
          ><i class="el-icon-time" /> {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            @click="handleDelImage(scope.row.id)"
            >删除
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="handleUpdImage(scope.row.id)"
            >修改</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :hide-on-single-page="true"
      :current-page="pageInfo.current"
      :page-size="pageInfo.size"
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {
  getImageList,
  delImageById,
  getTipsKeywordsFromPrefixApi,
} from "@/api/image";
import { imageServUrl } from "@/utils/constants";

export default {
  data() {
    return {
      pageInfo: { size: 10, current: 1, total: 0, records: [] },
      listLoading: true,
      urlPrefix: imageServUrl,
      keywords: "",
      queryFrom: {
        status: 0,
        title: "",
        description: "",
        createTime: null,
        createdBy: "",
        label: "",
      },
    };
  },
  mounted() {
    const labelName = this.$route.query.labelName;
    if (labelName && labelName !== "") {
      this.queryFrom.label = labelName;
    }
    this.fetchImages();
  },
  methods: {
    fetchImages() {
      this.listLoading = true;
      const params = {
        page: this.pageInfo.current,
        limit: this.pageInfo.size,
        status: 0,
      };
      if (this.queryFrom.title !== "") {
        params.title = this.queryFrom.title;
      }
      if (this.queryFrom.description !== "") {
        params.description = this.queryFrom.description;
      }
      if (this.queryFrom.createTime != null) {
        params.createTimeStart = this.queryFrom.createTime[0];
        params.createTimeEnd = this.queryFrom.createTime[1];
      }
      if (this.queryFrom.createdBy !== "") {
        params.createdBy = this.queryFrom.createdBy;
      }
      if (this.queryFrom.label !== "") {
        params.label = this.queryFrom.label;
      }
      // if (this.keywords !== "") {
      //   params.keywords = this.keywords;
      //   getImageListByKeywordsApi(params).then((res) => {
      //     this.pageInfo = res.data;
      //     this.listLoading = false;
      //   });
      // }
      getImageList(params).then((res) => {
        this.pageInfo = res.data;
        this.listLoading = false;
      });
    },
    handleCurrentChange(page) {
      this.pageInfo.current = page;
      this.fetchImages();
    },
    handleDelImage(imageId) {
      this.$confirm("确认删除该图片？删除之后不可恢复").then((val) => {
        delImageById(imageId).then((_) => {
          this.$notify.success({
            title: "提示",
            message: "图片删除成功",
          });
          this.fetchImages();
        });
      });
    },
    handleUpdImage(imageId) {
      this.$router.push({
        path: "/image/mod_image",
        query: { imageId: imageId },
      });
    },
    handleClickSearch() {
      if (
        this.queryFrom.title == "" &&
        this.queryFrom.description == "" &&
        this.queryFrom.label == "" &&
        this.queryFrom.createTime == null
      ) {
        this.$message({
          message: "请输入搜索条件",
          type: "warning",
          showClose: true,
        });
        return;
      }
      this.pageInfo = { size: 10, current: 1, total: 0, records: [] };
      this.fetchImages();
    },
    queryKeywordsAsync(queryString, callback) {
      if (this.keywords !== "") {
        getTipsKeywordsFromPrefixApi(this.keywords).then((res) => {
          const words = res.data.map((v) => {
            return { value: v };
          });
          console.log(words);
          callback(words);
        });
      }
    },
    toImageDetail(imageId) {
      this.$router.push({
        path: "/image/image_detail",
        query: {
          id: imageId,
        },
      });
    },
    handleClickRefresh() {
      this.queryFrom = {
        status: 0,
        title: "",
        description: "",
        createTime: null,
        createdBy: "",
        label: "",
      };
      this.pageInfo = { size: 10, current: 1, total: 0, records: [] };
      this.fetchImages();
    },
  },
};
</script>

<style scoped>
.add-btn {
  margin-bottom: 10px;
}
.el-link {
  font-size: 12px;
  margin-left: 4px;
}
.el-link:hover {
  font-weight: bold;
}
.inline-input {
  width: 400px;
}
.m-title {
  cursor: pointer;
}
.m-title:hover {
  color: #409eff;
}
.el-col {
  margin-bottom: 10px;
}
</style>

